<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<title>物业服务统计</title>
<jsp:include page="../../views/layout/inc.jsp"></jsp:include>

<script type="text/javascript">
	$(function() {
		searchFun();
	});

	function loadStatistics(data) {
		var serviceAndFeedbackCount = data.serviceAndFeedbackCount;
		var serviceTypeCount = data.serviceTypeCount;
		if(serviceAndFeedbackCount != null) {
			loadServiceAndFeedback(serviceAndFeedbackCount);
			loadServiceTypeCount(serviceTypeCount);
		}
		$('#searchForm table').show();
	}
	
	function loadServiceAndFeedback(data) {

	$('#serviceAndFeedback')
				.highcharts(
						{
							chart : {
								plotBackgroundColor : null,
								plotBorderWidth : null,
								plotShadow : false
							},
							title : {
								text : '物业服务及反馈'
							},
							tooltip : {
								pointFormat : '{series.name}: <b>{point.y}条</b>'
							},
							plotOptions : {
								pie : {
									allowPointSelect : true,
									cursor : 'pointer',
									dataLabels : {
										enabled : true,
										color : '#000000',
										connectorColor : '#000000',
										format : '<b>{point.name}</b>: {point.percentage:.1f} %'
									}
								}
							},
							series : [ {
								type : 'pie',
								name: '共有',
								data : data
							} ]
						});
	}

	function loadServiceTypeCount(data) {
		$('#serviceType')
				.highcharts(
						{
							chart : {
								plotBackgroundColor : null,
								plotBorderWidth : null,
								plotShadow : false
							},
							title : {
								text : '物业服务类型'
							},
							tooltip : {
								pointFormat : '{series.name}: <b>{point.y}条</b>'
							},
							plotOptions : {
								pie : {
									allowPointSelect : true,
									cursor : 'pointer',
									dataLabels : {
										enabled : true,
										color : '#000000',
										connectorColor : '#000000',
										format : '<b>{point.name}</b>: {point.percentage:.1f} %'
									}
								}
							},
							series : [ {
								type : 'pie',
								name: '共有',
								data : data
							} ]
						});
	}

	function searchFun() {
		$.ajax({
			type : 'post',
			url : '/propertyStatisticsController/getStatisticsData',
			data : $.serializeObject($('#searchForm')),
			success : function(reuslt) {
				loadStatistics(reuslt);
			}
		});
	}
	function cleanFun() {
		$('#searchForm input').val('');
		searchFun();
	}
</script>
</head>
<body>
	<div class="easyui-layout" data-options="fit : true,border : false">
		<div data-options="region:'north',title:'查询条件',border:false"
			style="height:60px; overflow: hidden;">
			<form id="searchForm">
				<table class="table table-hover table-condensed"
					style="display: none;">
					<tr>
						<th>创建时间</th>
						<td><input name="startGmtCreate" id="startGmtCreate"
							placeholder="点击选择时间" class="Wdate" style="width: 150px"
							onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'#F{$dp.$D(\'endGmtCreate\') || \'%y-%M-%d\'}'})" />
							至<input name="endGmtCreate" id="endGmtCreate"
							placeholder="点击选择时间" class="Wdate" style="width: 150px"
							onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'startGmtCreate\') || \'%y-%M-%d\'}'})" /></td>
					</tr>
				</table>
			</form>
		</div>
		<div data-options="region:'center',border:false">
		<div>
			<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="searchFun();">提交查询</a>
			<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true" onclick="cleanFun();">重置查询</a>
		</div>
			<div id="serviceAndFeedback" style="min-width: 800px; height: 400px"></div>
			<div id="serviceType" style="min-width: 800px; height: 400px"></div>
		</div>
	</div>
</body>
</html>